<template>
    <div>
        <div class="add">
            <div></div>
            <el-button class="add-button" type="text" @click="dialogVisible = true"
                style=" font-size: 16px;">新增行业</el-button>
        </div>
        <!-- 表格 -->
        <div class="tab">
            <el-table :data="list" style="width: 100%; border-radius: 5px;">
                <el-table-column prop="name" :label="PorgranList.name" />
                <el-table-column :label="PorgranList.img">
                    <template slot-scope="scope">
                        <img @click="dialogVisibles = true, bigimg = scope.row.img" width="100px" height="100px"
                            :src="scope.row.img" alt="">
                    </template>
                </el-table-column>
                <el-table-column width="180">
                    <template slot-scope="scope">
                        <el-button type="text" @click="updata(scope.row.id)"
                            style=" font-size: 16px; padding: 10px 20px;border-radius: 0; background: #08cfde;color: #000000;">编辑</el-button>
                        <el-button type="text" @click="del(scope.row.id)"
                            style="font-size: 16px; padding: 10px 20px; border-radius: 0; border: 1px solid #666; background: #fff;color: #666; font-size: 16px;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="example-pagination-block">
            <div class="example-demonstration">
            </div>
            <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]" :total="tableData.length"
                :page-size="page.pagesize" @current-change="changepage" @size-change="changesize" />
        </div>

        <!-- dialog对话框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form label-position="left" label-width="70px">
                <el-form-item :label="PorgranList.name + ':'">
                    <el-input v-model="data.name"></el-input>
                </el-form-item>
                <el-form-item :label="PorgranList.img + ':'">
                    <div style="display: flex; justify-content: center;">
                        <el-button style="border: 0px ; font-size: 16px ; color: #000; background-color:#08cfde ;"
                            @click="uploadImage" type="primary" round>上传图片<i
                                class="el-icon-upload el-icon--right"></i></el-button>
                        <input type="file" id="imageUploadInput" style="display: none;" accept="image/*" :multiple="false"
                            @change="handleFileSelect" />
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button
                    style="font-size: 16px ; border-radius: 0; border: 1px solid #666 ; color: #666; background-color:#fff ;"
                    @click="dialogVisible = false">取 消</el-button>
                <el-button style="font-size: 16px ; border-radius: 0; border: 0px ; color: #000; background-color:#08cfde ;"
                    type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 放大图片的dialog -->
        <el-dialog class="dialog" :visible.sync="dialogVisibles" width="50%" :before-close="handleCloses">
            <img :src="bigimg" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { updateFile } from '@/api/status'
import { getJoinIndustryList, addJoinIndustry, delJoinIndustry, getJoinIndustryInfo, updateJoinIndustry } from '@/api/JoinIndustry'

export default {
    data() {
        return {
            PorgranList: {
                name: "名字",
                img: "图片"
            },
            page: {
                //分页
                page: 1,
                pagesize: 10
            },
            tableData: [],
            list: [],//table中的数据
            dialogVisible: false,//添加编辑区域的dialog
            dialogVisibles: false,//图片显示区域的dialog
            bigimg: '',//放大后的图片
            data: {
                name: "",
                img: "",
                id: ""
            },
            id: 0
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            getJoinIndustryList().then((res) => {
                this.tableData = res.data.data
                this.list = this.tableData.slice((this.page.page - 1) * this.page.pagesize, (this.page.page - 1) * this.page.pagesize + this.page.pagesize)
            }).catch(() => {
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })

        },
        changepage(e) {
            this.page.page = e,
                this.getList()
        },
        changesize(e) {
            this.page.pagesize = e,
                this.getList()
        },
        add() {
            // 添加数据
            // 有id就是编辑无id就是添加
            if (this.data.id) {
                updateJoinIndustry(this.data).then(() => {
                    this.getList()
                    this.data.img = '',
                        this.data.name = ''
                    this.data.id = ''
                    this.$message({
                        type: 'success',
                        message: '编辑成功!'
                    });
                    this.dialogVisible = false
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            } else {
                addJoinIndustry(this.data).then(() => {
                    this.getList()
                    this.data.img = '',
                        this.data.name = ''
                    this.dialogVisible = false
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            }

        },
        del(id) {
            // 删除数据
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delJoinIndustry(id).then(() => {
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        updata(id) {
            // 编辑数据
            this.dialogVisible = true
            this.data.id = id
            getJoinIndustryInfo(id).then(res => {
                const dataup = res.data.data
                this.data.img = dataup.img
                this.data.name = dataup.name
            }).catch(() => {
                this.$message({
                    message: '网络不给力呦',
                    type: 'warning'
                });
            })
        },
        // 添加编辑区域的dialog
        handleClose(done) {
            this.$confirm('确认关闭？').then(() => {
                done();
            }).catch(() => { });
        },
        // 图片显示区域的dialog
        handleCloses(done) {
            done()
        },
        // 上传文件
        uploadImage() {
            const input = document.getElementById('imageUploadInput');
            input.click(); // 触发文件上传输入框的点击事件
        },
        handleFileSelect(event) {
            const file = event.target.files[0] // 获取用户选择的文件

            if (file) {
                const formData = new FormData();
                formData.append('token', this.$store.state.token)
                formData.append('file', file);
                updateFile(formData).then(res => {
                    this.data.img = res.data.data
                }).catch(() => {
                    this.$message({
                        message: '网络不给力呦',
                        type: 'warning'
                    });
                })
                // 发送上传请求给服务器...
            }
        }
    }
}
</script>
<style scoped lang="less">
.add {
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .add-button {
        font-size: 14px;
        color: #000000;
        position: absolute;
        top: 70px;
        right: 30px;
        z-index: 1;
        background-color: #08cfde;
        border: none;
        border-radius: 0;
        // padding: 0 10px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.tab {
    margin: 10px;
    padding: 10px;
    background-color: #fff;
}

img {
    cursor: pointer;
}

.example-pagination-block {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .example-demonstration {
        line-height: 32px;
    }
}

.dialog {
    img {
        width: 100%;
    }
}
</style>